<!--
@description: 用户信息
@creationTime: 2025-04-21
-->

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户信息'
  }
}
</route>

<template>
  <view>
    <wd-form :model="formData" ref="formRef" border>
      <view class="flex flex-justify-between m-3 box-border flex-items-center">
        <text class="text-lg font-size-3 font-800">用户信息</text>
        <!-- <text class="font-size-3 c-#347cd0">查看全部</text> -->
      </view>
      <wd-card>
        <wd-input
          label="用户昵称"
          prop="name"
          v-model="formData.name"
          :rules="[{ required: true, message: '请输入用户名' }]"
        />
        <wd-input
          prop="mobile"
          label="手机号"
          v-model="formData.mobile"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <wd-input show-password prop="certNo" label="证件号码" v-model="formData.certNo" placeholder="请输入证件号码" />
        <ConfigItem label="性别" v-model="formData.sex" config-name="Sex"></ConfigItem>
      </wd-card>
      <view class="my-3 mx-2">
        <wd-button type="primary" :block="true" @click="submit">提交</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getUserApi, setUserApi } from '@/api/loginApi'
import ConfigItem from '@/components/form/ConfigItem.vue'
const formData = ref<any>({})
const formRef = ref()

const submit = async () => {
  let validate = await formRef.value.validate()

  if (!validate.valid) return

  await setUserApi(formData.value)
  uni.showToast({ title: '保存成功', icon: 'success' })
  uni.navigateBack()
}
onMounted(async () => {
  const res: any = await getUserApi()
  formData.value = {
    avatar: res.data.avatar,
    certNo: res.data.certNo,
    context: res.data.context,
    extraParams: res.data.extraParams,
    mobile: res.data.mobile,
    name: res.data.username,
    sex: res.data.sex,
    userId: res.data.id
  }
})
</script>

<style lang="scss" scoped></style>
